<template>
  <div class="dependence-page">
    <Spin fix v-if="loading"></Spin>
    <Tree 
      :data="treeData"
      v-else
      class="demo-tree-render"></Tree>
  </div>
</template>

<script>
import { 
  getAllRelationTree
} from '@/view/testPlatform/asset/api/productPart.js'
export default {
  name: 'DependencePage',
  props: {
    productId: {
      type: String,
      default: ''
    }
  },
  components: { },
  data() {
    return {
      treeData: [],
      loading: true
    }
  },
  mounted(){
    this.getAllRelationTree()
  },
  methods:{
    renderContent(h, { root, node, data }) {
      return h('span', {
          class: 'row-span',
      }, [
          h('span', {
            class: 'col-span-1',
          }, data.title),
          h('span', {
            class: 'col-span-2',
          }, data.type)
      ]); 
    },
    // 获取产品下部件、组件的关系，并重构为树形组件可用的格式
    getAllRelationTree() {
      this.loading = true
      getAllRelationTree(this.productId).then(({ code, message, data }) => {
        if (code !== 1) {
          this.$Message.warning(message)
          return
        }
        let restObj = {}
        this.assemblyData(data, restObj)
        this.treeData = [restObj]
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    assemblyData(obj, restObj) {
      restObj.title = `${obj.name} (${obj.type === 0 ? '部件' : obj.type === 1 ? '组件' : '产品'})`
      restObj.children = []
      restObj.expand = true
      // restObj.type = obj.type === 0 ? '部件' : obj.type === 1 ? '组件' : '产品'
      if (obj.children && obj.children.length) {
        obj.children.forEach(item => {
          restObj.children.push(this.assemblyData(item, {}))
        })
      }
      return restObj
    }
  }
}
</script>

<style scoped>
.dependence-page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
  border-radius: 5px;
  position: relative;
}

.demo-tree-render /deep/ .ivu-tree-title{
    width: 100%;
}
.dependence-page /deep/ .row-span {
  display: inline-block;
  width: 100%;
}
.dependence-page /deep/ .col-span-1 {
  width: calc(100% - 80px);
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.dependence-page /deep/ .col-span-2 {
  display: inline-block;
  float: right;
  margin-right: 32px;
}
</style>